<template>
  <div>
    <el-table border style="width: 100%" :data="RoletableData">
      <el-table-column prop="username" label="账号">
      </el-table-column>
      <el-table-column prop="name" label="姓名">
      </el-table-column>
    </el-table>
    <el-pagination style="text-align:center;margin-top: 20px;" :current-page.sync="pageInfo.pageNum"
      :page-sizes="[2, 3, 5, 10]" :page-size.sync="pageInfo.pageSize" layout="prev, pager, next,total,jumper,->, sizes"
      :total="pageInfo.total" :pager-count="7" @current-change="getUserbyRole" @size-change="getUserbyRole">
    </el-pagination>

  </div>
</template>

<script>

export default {
  name: 'showRole',
  props: {
    id: {
      required: true,
    },
  },
  data() {
    return {
      pageInfo: {
        pageNum: 1,
        pageSize: 3,
        total: 20,
      },
      RoletableData: [],

    }
  },
  mounted() {
    this.getUserbyRole()
  },
  methods: {
    async getUserbyRole() {
      this.userDialogVisible = true;
      let { pageNum, pageSize } = this.pageInfo;
      let res = await this.$API.SystemMenus.reqUserByRole(this.id, pageNum, pageSize);
      if (res.code == 200) {
        this.pageInfo.total = res.data.total;
        this.RoletableData = res.data.list;

      }
    },
  }

};
</script>

<style lang="scss" scoped></style>